{% extends "layouts/base.volt" %}

{% block pageEnd %}
    <script src="//cdn.bootcss.com/layer/2.4/layer.min.js"></script>
    <script type="text/javascript">
        var appendHandler = function () {
            layer.prompt({
                title: 'Your original URL here:',
                formType: 0 //prompt风格，支持0-2
            }, function (text, index) {
                layer.close(index);
                if (!(text.startsWith('http://') || text.startsWith('https://'))) {
                    layer.alert('URL必须是以http://或https://开始!', function (index) {
                        layer.close(index);
                        appendHandler();
                    });
                    return;
                }
                var layerIndex = layer.load();
                $.post($('#but_append').attr('durl'), {url: text}, function (data) {
                    console.log(data);
                    layer.close(layerIndex);
                    if (data.status == 10000) {
                        var data = data.result;
                        var tr = $('<tr></tr>');
                        var tdOriginal = $('<td></td>');
                        tdOriginal.html(data.original);
                        tr.append(tdOriginal);

                        var tdCreateAt = $('<td></td>');
                        tdCreateAt.html(data.createAt);
                        tr.append(tdCreateAt);

                        var tdUrl = $('<td></td>');
                        tdUrl.html('http://url.herclub.com/' + data.id);
                        tr.append(tdUrl);

                        var tdClicks = $('<td></td>');
                        tdClicks.html(data.clicks);
                        tr.append(tdClicks);

                        $('#tbody_box').append(tr);

                    } else {
                        layer.alert(data.errmsg);
                    }
                }, 'json');
            });
        };
        var setTitle = function(){
            var obj = $(this);
            var id = obj.attr('did');
            var objTitle = $($('#item-' + id + ' span').get(0));
            var title = objTitle.html();
            console.log(title);
            layer.prompt({
                title: 'title:',
                formType: 0, //prompt风格，支持0-2
                value: title
            }, function (text, index) {
                layer.close(index);
                var layerIndex = layer.load();
                $.post('{{ url('shorturl/settitle') }}', {id: id, title: text}, function (data) {
                    console.log(data);
                    layer.close(layerIndex);
                    if (data.status == 10000) {
                        objTitle.html(text);
                    } else {
                        layer.alert(data.errmsg);
                    }
                }, 'json');
            });
        };
        $(function () {
            $('#but_append').on('click', appendHandler);
            $('.but_settitle').on('click', setTitle);
        });
    </script>
{% endblock %}

{% block content %}
    <table class="table table-hove">
        <caption><h3>URL Shortener</h3></caption>
        <thead>
        <tr>
            <th>Title</th>
            <th>Original URL</th>
            <th>Created</th>
            <th>Short URL</th>
            <th>All Clicks</th>
        </tr>
        </thead>
        <tbody id="tbody_box">
        {% for item in urlList %}
            <tr>
                <td id="item-{{ item.urlId }}">
                    <span>{{ item.title }}</span>
                    <button did="{{ item.urlId }}" type="button" class="btn btn-default btn-xs but_settitle"><i class="glyphicon glyphicon-pencil"></i></button>
                </td>
                <td>{{ item.original }}</td>
                <td>{{ item.createAt }}</td>
                <td>http://url.herclub.com/{{ numberCrypt.numberEncode(item.urlId) }}</td>
                <td>{{ item.clicks }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    <div class="row">
        <div class="col-md-12">
            <button id="but_append" durl="{{ url('shorturl/append') }}" type="button"
                    class="btn btn-primary center-block"><span class="glyphicon glyphicon-plus"> </span> 添加
            </button>
        </div>
    </div>
{% endblock %}